<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="<%=basePath%>js/echarts.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    </head>
</head>
<body>  <div id="main" style="width: 1240px;height:660px;margin: auto;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: ['万寿路街道', '羊坊店街道', '甘家口街道', '八里庄街道', '紫竹院街道', '北下关街道', '北太平庄街道', '海淀街道', '中关村','学院路街道', '清河街道','青龙桥',
                '西三旗街道','香山街道','马连洼街道','花园路街道','田村街道', '上地街道','曙光街道','燕园街道','永定路街道','清华园街道']
        },
        series: [
            {
                name: '数据来源',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    position: 'inner',
                    fontSize: 16,
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 1848, name: '社区卫生服务站'},
                    {value: 675, name: '社区养老服务驿站'},
                    {value: 800, name:'养老照料中心'},
                    {value: 879, name: '社区卫生服务中心',selected:true}
                ]
            },
            {
                name: '数据统计',
                type: 'pie',
                radius: ['45%', '60%'],
                labelLine: {
                    length: 30,
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,

                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: [
                    {value: 448, name: '万寿路街道'},
                    {value: 335, name: '羊坊店街道'},
                    {value: 310, name: '甘家口街道'},
                    {value: 251, name: '八里庄街道'},
                    {value: 234, name: '紫竹院街道'},
                    {value: 147, name: '北下关街道'},
                    {value: 147, name: '北太平庄街道'},
                    {value: 147, name: '海淀街道'},
                    {value: 147, name: '中关村'},
                    {value: 147, name: '学院路街道'},
                    {value: 147, name: '清河街道'},
                    {value: 147, name: '青龙桥'},
                    {value: 147, name: '香山街道'},
                    {value: 147, name: '西三旗街道'},
                    {value: 147, name: '马连洼街道'},
                    {value: 147, name: '花园路街道'},
                    {value: 147, name: '田村街道'},
                    {value: 147, name: '上地街道'},
                    {value: 147, name: '曙光街道'},
                    {value: 135, name: '燕园街道'},
                    {value: 135, name: '永定路街道'},
                    {value: 102, name: '清华园街道'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</div>
</body>
</html>
